<!--adminRegister-->
<template>
  <div>
    <el-row >
      <div class="register-head">
        <img class="logo" :src="logoImage" alt="" slot="error">
        <span style="font-size: 28px;margin-left: 10px">求职招聘管理系统</span>
      </div>
    </el-row>
    <el-col>
      <div class="register-container">
        <div class="register-box">
          <div style="font-weight: bold;font-size: 24px;text-align: center;margin-bottom: 30px;color: #1450aa">注 册</div>
          <el-form :model="data.form" ref="formRef" :rules="data.rules">
            <el-form-item prop="username">
              <el-input :prefix-icon="User" size="large" v-model="data.form.username" placeholder="请输入用户名"/>
            </el-form-item>
            <el-form-item prop="password">
              <el-input :prefix-icon="Lock" size="large" v-model="data.form.password" show-password placeholder="请输入密码"/>
            </el-form-item>
            <el-form-item prop="repassword">
              <el-input :prefix-icon="More" size="large" v-model="data.form.repassword" show-password placeholder="请确认密码"/>
            </el-form-item>
<!--            <el-form-item prop="verificationcede">-->
<!--              <el-input :prefix-icon="More" size="large" v-model="data.form.verificationcede" placeholder="请输入验证码"/>-->
<!--            </el-form-item>-->
<!--            <div style="margin-bottom: 10px">-->
<!--              <Captcha ref="captcha"/>-->
<!--            </div>-->
            <el-form-item>
              <el-button size="large" type="primary" style="width: 100%" @click="register">注册</el-button>
            </el-form-item>
            <div style="text-align: right">已有账号？<a href="/admin/login">登录</a></div>
          </el-form>
        </div>
      </div>
    </el-col>
  </div>
</template>


<script setup>
import {reactive, ref} from "vue";
import {Lock, More, User} from "@element-plus/icons-vue";
import logoImage from "@/assets/icons/mylogo.png";
import {ElMessage} from "element-plus";
import Captcha from "@/components/Captcha.vue";

const validatePass = (rule, value, callback) => {
  if (!value) {
    callback(new Error('请确认密码'))
  } else if (value !== data.form.password) {
    callback(new Error('两次密码不一致'))
  } else {
    callback()
  }
}

const data=reactive({
  form:{
    username:'',
    password:'',
    repassword:''
  },
  rules:{
    username:[
      { required:true, message:'请输入账号', trigger:'blur'}
    ],
    password:[
      { required:true, message:'请输入密码', trigger:'blur'}
    ],
    repassword:[
      {validator: validatePass, trigger: 'blur'}
    ],
  }
})
const formRef=ref()


//点击登录按钮会触发这个方法
const register=()=>{
  formRef.value.validate((valid=>{
    if (valid) {
      //调用后台接口
      // service.post('/user/create',data.form).then(res=>{
      //   ElMessage.success("注册成功")
      //   router.push('/adminLogin')
      // }).catch(error=>{
      //   ElMessage.error(error.msg)
      // })
      ElMessage({
        message: '未开放管理员注册',
        type: 'warning'
      })
    }
  })).catch(error=>{
    console.error(error)
  })
}


</script>

<style scoped>

.register-container{
  height: 100vh ;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  background: url("@/assets/images/fengjing4.webp");
  background-size: cover;
}
.register-head{
  height: 60px;
  width:  100%;
  padding: 2px 24px;
  background-color: rgba(255,255,255,.8);
  font-weight: bold;
  line-height: 60px;
  display: flex;
}
.register-box{
  width: 400px;
  padding: 80px 30px;
  border-radius: 5px;
  box-shadow: 0 0 10px rgb(0,0,0,.1);
  background-color: rgba(255,255,255,.8);
}
</style>

